<template>
  <div class="roleList">
    <div class="text-msg">
      说明： <br>
       1. 修改模块及定价方案并启用时，将在前台即时显示； <br>
       2.已购买套餐的用户，套餐次数将在修改后的第二天０点生效；  <br>
       3.请尽量在下班时间调整套餐及模块，以免调整时有用户下单支付影响体验。
    </div>
    <div class="topBtn">
      <el-button
        size="mini"
        @click="editMall()"
        type="success"
        plain
        icon="el-icon-plus"
        v-has="'system:plan:editPlan'"
        >编辑套餐</el-button
      >
    </div>
    <div class="tableBox" ref="tableBoxRef">
      <el-table
        ref="multipleTable"
        v-loading="tableLoading"
        row-key="id"
        :header-cell-style="{
          background: '#F8F8F8',
          color: '#333',
          fontSize: '16px',
          fontWeight: '700',
        }"
        :height="screenHeight - 200"
        border
        :data="planModuleData.planModuleList"
        style="width: 100%"
      >
        <el-table-column prop="moduleName" align="center" label="模块">
        </el-table-column>
        <el-table-column align="center" :label="plans[0].name">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.freeType != 3">{{
                scope.row.freeTime
              }}</span
              ><span>{{ plansFormatter[scope.row.freeType] }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="plans[1].name+`(`+plans[1].price+`)`">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.plan2Type != 3">{{ scope.row.plan2 }}</span
              ><span>{{ plansFormatter[scope.row.plan2Type] }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="plans[2].name+`(`+plans[2].price+`)`">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.plan3Type != 3">{{ scope.row.plan3 }}</span
              ><span>{{ plansFormatter[scope.row.plan3Type] }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit-outline"
              size="mini"
              type="text"
              @click="editClick(scope.$index)"
              v-has="'system:plan:editModule'"
              >编辑</el-button
            >
            <el-button
              style="color:#67C23A"
              v-has="'system:plan:editModuleState'"
              v-if="scope.row.state == 0"
              size="mini"
              type="text"
              @click="startClick(scope.row)"
              >启用</el-button
            >
            <el-button
              style="color:#F56C6C"
              v-has="'system:plan:editModuleState'"
              v-else-if='scope.row.state == 1'
              size="mini"
              type="text"
              @click="disableClick(scope.row)"
              >停用</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增/修改权限 -->
    <el-dialog :close-on-click-modal="false" 
      :title="title"
      :visible.sync="dialogVisible"
      width="480px"
      class="addEditRoleDialog"
    >
      <div class="content">
        <div v-if="title == '启用'">
          确认要启用模块吗，启用后将按套餐规则限定次数，并在前台实时显示。
        </div>
        <div v-else>
          确认要停用模块吗，停用后模块次数将失去限制，并从前台隐藏，请谨慎操作。
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button
          v-clickForbidden
          size="mini"
          type="primary"
          @click="saveClick"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" 
      title="编辑套餐"
      :visible.sync="setMalldialogVisible"
      width="480px"
      class="addEditRoleDialog"
      @open="editDialogOpen"
    >
      <div class="content">
        <div class="mall-content">
          <div>
            <div>套餐名称*</div>
            <el-input
              :disabled="plansEdit[0].id == 1"
              size="mini"
              v-model="plansEdit[0].name"
              placeholder="请输入企业名称"
              class="input-style"
            ></el-input>
          </div>
          <div>
            <div>金额*</div>
            <el-input
              :disabled="plansEdit[0].id == 1"
              class="input-style"
              size="mini"
              v-model="plansEdit[0].price"
              placeholder="请输入金额"
            ></el-input>
          </div>
        </div>
        <div class="mall-content">
          <div>
            <div>套餐名称*</div>
            <el-input
              size="mini"
              v-model="plansEdit[1].name"
              placeholder="请输入企业名称"
              class="input-style"
            ></el-input>
          </div>
          <div>
            <div>金额*</div>
            <el-input
              class="input-style"
              size="mini"
              v-model="plansEdit[1].price"
              placeholder="请输入金额"
            ></el-input>
          </div>
        </div>
        <div class="mall-content">
          <div>
            <div>套餐名称*</div>
            <el-input
              size="mini"
              v-model="plansEdit[2].name"
              placeholder="请输入企业名称"
              class="input-style"
            ></el-input>
          </div>
          <div>
            <div>金额*</div>
            <el-input
              class="input-style"
              size="mini"
              v-model="plansEdit[2].price"
              placeholder="请输入金额"
            ></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="setMalldialogVisible = false"
          >取 消</el-button
        >
        <el-button
          v-clickForbidden
          size="mini"
          type="primary"
          @click="saveEditMallClick"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" 
      title="编辑模块"
      :visible.sync="setModeldialogVisible"
      width="800px"
      class="addEditRoleDialog"
      @open="editModelDialogOpen"
    >
      <div class="content">
        <div class="mall-content">
          <div>
            <div>模块名称</div>
            <el-input
              style="width: 700px"
              :disabled="true"
              size="mini"
              v-model="editModelData.moduleName"
              placeholder="请输入模块名称"
              class="input-style"
            ></el-input>
          </div>
        </div>
        <div class="mall-content">
          <div>
            <div>定价</div>
            <div style="display: flex; width: 700px">
              <div>
                <el-input
                  :disabled="true"
                  size="mini"
                  v-model="plans[0].name"
                  class="model-style"
                ></el-input>
              </div>
              <div>
                <el-select filterable 
                  class="model-style"
                  clearable
                  v-model="editModelData.freeType"
                  size="mini"
                >
                  <el-option
                    v-for="item in typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div>
                <el-input
                  v-if="editModelData.freeType != 3"
                  size="mini"
                  v-model="editModelData.freeTime"
                  class="model-style"
                ></el-input>
              </div>
            </div>
            <div style="display: flex; width: 700px">
              <div>
                <el-input
                  :disabled="true"
                  size="mini"
                  v-model="plans[1].name"
                  class="model-style"
                ></el-input>
              </div>
              <div>
                <el-select filterable 
                  class="model-style"
                  clearable
                  v-model="editModelData.plan2Type"
                  size="mini"
                >
                  <el-option
                    v-for="item in typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div>
                <el-input
                  v-if="editModelData.plan2Type != 3"
                  size="mini"
                  v-model="editModelData.plan2"
                  class="model-style"
                ></el-input>
              </div>
            </div>
            <div style="display: flex; width: 700px">
              <div>
                <el-input
                  :disabled="true"
                  size="mini"
                  v-model="plans[2].name"
                  class="model-style"
                ></el-input>
              </div>
              <div>
                <el-select filterable 
                  class="model-style"
                  clearable
                  v-model="editModelData.plan3Type"
                  size="mini"
                >
                  <el-option
                    v-for="item in typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div>
                <el-input
                  v-if="editModelData.plan3Type != 3"
                  size="mini"
                  v-model="editModelData.plan3"
                  class="model-style"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="setModeldialogVisible = false"
          >取 消</el-button
        >
        <el-button
          v-clickForbidden
          size="mini"
          type="primary"
          @click="saveEditModelClick"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      screenHeight: document.documentElement.clientHeight,
      role_: false,
      tableLoading: false,
      tableData: [],
      dialogVisible: false,
      addEditForm: {
        roleNameInput: "",
        roleCodeInput: "",
        checkedIds: [],
      },
      plansFormatter: {
        1: "次/天",
        2: "次",
        3: "无限",
      },
      addEditRules: {
        roleNameInput: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
        roleCodeInput: [
          { required: true, message: "角色编码不能为空", trigger: "blur" },
        ],
      },
      title: "启用",
      planModuleData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      isCheck: false,
      activeTableCheckedIds: [],
      plans: [{}, {}, {}],
      moduleId: "",
      setMalldialogVisible: false,
      setModeldialogVisible: false,
      plansEdit: [{}, {}, {}],
      typeOption: [
        { value: 1, label: "次/天" },
        { value: 2, label: "次" },
        { value: 3, label: "无限" },
      ],
      editModelData: {},
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },

  created() {
    this.getPlanModuleData();
  },
  methods: {
    editModelDialogOpen() {},
    editDialogOpen() {
      this.getPlanModuleData();
    },
    saveEditModelClick() {
      console.log(this.editModelData.plan2);
      if (
        (this.editModelData.freeType != 3 &&
          this.editModelData.freeTime === "") ||
        (this.editModelData.plan2Type != 3 && this.editModelData.plan2 === "") ||
        (this.editModelData.plan3Type != 3 && this.editModelData.plan3 === "")
      ) {
        return this.$message.warning("请检查次数不能为空");
      }
      this.$api.editModule(this.editModelData).then((response) => {
        if (response.data.code == "00000") {
          this.$message.success("编辑成功");
          this.setModeldialogVisible = false;
          this.getPlanModuleData();
        }
      });
    },
    saveClick() {
      let state = 0;
      if (this.title == "启用") {
        state = 1;
      }
      this.$api
        .editStatus({
          moduleId: this.moduleId,
          state: state,
        })
        .then((response) => {
          if (response.data.code == "00000") {
            this.$message.success("操作成功");
            this.dialogVisible = false;
            this.getPlanModuleData();
          }
        });
    },
    saveEditMallClick() {
      let done = false;
      this.plansEdit.forEach((item) => {
        if (item.name == "" || item.price.toString() == "") {
          done = true;
        }
      });

      if (!done) {
        this.$api.editPlan(this.plansEdit).then((response) => {
          if (response.data.code == "00000") {
            this.$message.success("编辑成功");
            this.setMalldialogVisible = false;
            this.getPlanModuleData();
          }
        });
      }
    },
    editMall() {
      this.setMalldialogVisible = true;
      this.plansEdit = JSON.parse(JSON.stringify(this.plans));
    },
    /**
     * 状态更新回调
     * @param {*} row
     */
    async statusChange(row) {
      let data = {
        id: row.id,
        status: row.status,
      };
      this.$api.roleStatus(data).then((response) => {
        if (response.data.code == "00000") {
          this.$message.success("状态更新成功");
        }
      });
    },
    getPlanModuleData() {
      this.$api.getPlanModuleList().then((response) => {
        this.planModuleData = response.data.result;
        this.plans = JSON.parse(JSON.stringify(response.data.result.plans));
      });
    },

    startClick(row) {
      this.moduleId = row.moduleId;
      this.title = "启用";
      this.dialogVisible = true;
    },
    disableClick(row) {
      this.moduleId = row.moduleId;
      this.title = "停用";
      this.dialogVisible = true;
    },
    /**
     * 编辑按钮
     * @param {*} row
     */
    editClick(index) {
      this.editModelData = [];
      this.setModeldialogVisible = true;
      this.editModelData = JSON.parse(
        JSON.stringify(this.planModuleData.planModuleList[index])
      );
    },

    /**
     * 新增对话框打开时回调
     * @param {*}
     */
    addEditDialogOpen() {},
  },
};
</script>

<style lang="less" scoped>
.roleList {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  .topBtn {
    margin: 10px 0;
    text-align: right;
  }
  .tableBox {
    flex: 1;
  }

  .addEditRoleDialog {
    .el-form-item {
      &.roleCode {
        .item {
          padding-top: 6px;
          box-sizing: border-box;
        }
      }
      .permissions {
        height: 500px;
        overflow: auto;
      }
    }
    .btns {
      text-align: right;
      margin-bottom: 0;
    }
  }
}
/deep/.el-button--success.is-plain {
  color: #fff;
  border-color: #409eff;
  background-color: #409eff;
}
/deep/.el-form-item {
  margin-bottom: 12px;
}
.mall-content {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  .input-style {
    width: 200px;
    margin-top: 10px;
  }
}
.model-style {
  width: 200px;
  margin-top: 10px;
  margin-right: 50px;
}
.text-msg {
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
